<template>
	<div class="createTask w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="taskLine">
			<em class="tit">选择课程：</em>
			<div class="courseBefore" v-show="courseBefore">
				<a @click="courseSelect">添加</a><i>提示：每次课程任务最多可添加10个课程</i>
			</div>
			<div class="courseBefore" v-show="courseAfter">
				<span v-for="(item,index) in this.courseSelectNames" :key="index">
					{{item.courseName}}
					<a @click="courseEdit" v-if="nowType!='see'">修改</a>
					<a @click="courseDelete(index)" v-if="nowType!='see'"><i class="el-icon-delete"></i></a>
				</span>
			</div>
		</div>
		<div class="taskLine">
			<em class="tit">选择人员：</em>
			<div class="courseBefore" v-show="peopleBefore">
				<a @click="coursePersonnel">添加</a>
			</div>
			<div class="courseBefore" v-show="peopleAfter">
				<a @click="peopleEdit" v-if="nowType!='see'">编辑</a>
				<div class="pepCon">
					<span v-for="(item,index) in this.peopleSelectNames" :key="index" class="personHover">
						<a @click="peopleDelete(index)" v-if="nowType!='see'">&#10005;</a>
						<el-popover placement="right" trigger="hover">
  							<p slot="reference" @mouseenter="enter(item,index)">{{item.peopleName}}</p>
  							<div class="infoDetail">
  								<div class="iconImg">
									<img :src="hover_headimg"/>
									<span>{{hover_nickname}}</span>
									<span>{{hover_gradeRuleName}}</span>
								</div>
								<span>账号/手机号：{{hover_phone}}</span>
								<span>组织机构：{{hover_organizationName}}</span>
								<span>部门：{{hover_departmentName}}</span>
								<span>岗位：{{hover_stationName}}</span>
								<span>用户分类：{{hover_roleLabel}}</span>
  							</div>
						</el-popover>
					</span>
				</div>
			</div>
		</div>
		<div class="taskLine">
			<em class="tit">学习时间：</em>
			<el-radio-group v-model="openOrClose" :disabled="nowType=='see'">
				<el-radio :label="1" name="Type">开启</el-radio>
				<el-radio :label="2" name="Type">不开启</el-radio>
			</el-radio-group>
			<div class="dateDive" v-if="this.openOrClose==1">
				<el-date-picker v-model="starttime" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				<em>——</em>
				<el-date-picker v-model="endtime" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
			</div>
			<i class="warn">提示：未开启学习时间，课程任务将没有学习时间限制</i>
		</div>
		<div class="taskLine">
			<em class="tit">消息通知：</em>
			<div class="notice">
				<em class="tit">新任务通知：</em>
				<el-checkbox-group v-model="taskNotice" @change="selectTaskNoticeArr" :disabled="nowType=='see'"> 
    				<el-checkbox v-for="item in taskNoticeArr" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
 				</el-checkbox-group>  
 				<p>通知样式：发布了新的课程任务《%name%》，请点击查看。</p>
			</div>
			<div class="notice">
				<em class="tit">学习时间通知：</em>
				<el-checkbox-group v-model="studyNotice" @change="selectstudyNoticeArr" :disabled="nowType=='see'">
    				<el-checkbox v-for="item in studyNoticeArr" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
 				</el-checkbox-group>
 				<p>通知样式：发布了新的课程任务《%name%》，请点击查看。</p>
			</div>
		</div>
		<div class="footerButton">
			<a @click="checkSave" v-show="nowType!='see'" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
			<a @click="cancel" class="cancel" v-show="nowType!='see'">取消</a>
		</div>
		
		
		
		<div class="courseSelectWrap" v-show="courseSelectWrap" style="overflow-x: hidden;">
			<a @click="courseSelectClose" class="courseSelectClose">&#10005;</a>
			<p>添加课程</p>
			<div class="courseSelectLine">
				<el-cascader v-model="courseClassify" :options="options" :props="optionPropsClass" :show-all-levels='false' placeholder="课程分类" class="th_2" @change="getKcCircleList"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入课程关键词……" v-model="studyKeySearch"/>
					<a @click="getKcCircleList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTableCourse" :data="tableDataWrap" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="60"></el-table-column>
				<el-table-column prop="courseName" label="课程名称"></el-table-column>
			</el-table>
			<div class="studyPag">
				<el-pagination @current-change="handleCurrentChange" :current-page= "currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
			</div>
			<div class="footerButton">
				<a @click="courseSelectWrapSubmit">确定</a>
				<a @click="courseSelectClose" class="cancel">取消</a>
			</div>
		</div>


		<div class="courseSelectWrap" v-show="peopleSelectWrap">
			<a @click="peopleSelectClose" class="courseSelectClose">&#10005;</a>
			<p>选择人员</p>
			<div class="courseSelectLine">
				<el-cascader v-model="value" :options="cityArr" :props="optionProps" class="th_2" placeholder="选择地区" @change="cityArrChange"></el-cascader>
				<div class="msearch">
					<input placeholder="请输入关键词……" v-model="studyKeySearch"/>
					<a @click="getKcCircleListPeople"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<div class="userContent clearFix">
				<div class="leftContent">
					<el-input placeholder="查找组织机构、部门" v-model="filterText"></el-input>
					<el-tree :data="organizationArr" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[dataId]" node-key="id"></el-tree>
				</div>
				<div class="rightContent">
					<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChangePeople">
						<el-table-column type="selection"></el-table-column>
						<el-table-column prop="nickname" label="姓名" width="100"></el-table-column>
						<el-table-column prop="organizationResultName" label="组织"></el-table-column>
						<el-table-column prop="stationName" label="岗位" width="150"></el-table-column>
					</el-table>
					<div class="studyPag">
						<el-pagination @current-change="handleCurrentChangePeople" :current-page= "currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
					</div>
				</div>
			</div>
			<div class="footerButton">
				<a @click="peopleSelectWrapSubmit">确定</a>
				<a @click="peopleSelectClose" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default{
		data(){
			return{
				nowType:'',
				updateTitle:'',
				clickLock:true,

				id:'',
				courseSelectIds:'',
				courseSelectNamesMul:[],
				courseSelectNames:[],
				openOrClose:'',
				starttime:'',
				endtime:'',
				taskNotice:[],
				taskNoticeArr:[{
					id:1,
					name:'APP通知'
				},{
					id:2,
					name:'短信通知'
				},{
					id:3,
					name:'邮件通知'
				}],
				taskNoticeIds:[],
				studyNotice:[],
				studyNoticeArr:[{
					id:1,
					name:'APP通知'
				},{
					id:2,
					name:'短信通知'
				},{
					id:3,
					name:'邮件通知'
				}],
				studyNoticeIds:[],

				courseBefore:true,
				courseAfter:false,
				courseSelectWrap:false,
				
				courseClassify:[],
				options: [],
				optionPropsClass: {
				    value: 'id',
				    label: 'columnName',
				    children: 'childList'
				},
				
				studyKeySearch:'',
				tableDataWrap:[],
				multipleSelection: [],
				multipleSelectionName: [],

				peopleSelectWrap:false,
				peopleBefore:true,
				peopleAfter:false,
				dataId:'',
				cityArr:[],
				value: [],
				tableData:[],
				optionProps: {
					value: 'id',
					label: 'name',
					children: 'list',
					checkStrictly: true
				},
				filterText: '',
				organizationArr:[],
				defaultProps: {
          			children: 'childrenList',
          			label: 'name'
        		},
        		proviceid:'',
        		cityid:'',
        		regionid:'',
        		peopleSelectIds:'',
        		peopleSelectNames:[],
				peopleSelectNamesMul:[],
				multipleSelectionPeople: [],
				multipleSelectionNamePeople: [],
				courseSelectNamesMulPeople:[],

				hover_headimg:'',
				hover_nickname:'',
				hover_gradeRuleName:'',
				hover_phone:'',
				hover_organizationName:'',
				hover_departmentName:'',
				hover_stationName:'',
				hover_roleLabel:'',


				pagesize: 15,
		        currentpage: 1,
		        total: 1,
				multipleTableCourse:[]
			}
		},
		methods:{
			getParams() {
				var routerParams = this.$route.params.type;
				this.identity = this.$route.params.rootcompanyid;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
					this.updateTitle = "编辑课程任务";
				}else if(routerParams == 'see') {
					this.nowType = 'see';
					this.updateTitle = "查看课程任务";
				}else{
					this.nowType = 'add';
					this.updateTitle = "添加课程任务";
				};
			},
			//选择课程start    点击选择添加课程按钮
			courseSelect(){
				this.courseSelectWrap = true;
				this.getColumnList();
				this.getKcCircleList();
			},
			//添加课程列表
			getKcCircleList(){
				var s={
				    page: this.currentpage,
					num: this.pagesize,
					fuzzyFields: this.search,
					courseWatchPer:this.permission,
					rootcompanyid:1,
					courseType:1
                };
				if(this.courseClassify!=null && this.courseClassify.length >= 2){
                	s.courseColumnYi = this.courseClassify[0];
					s.courseColumn = this.courseClassify[1];
                }
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/kcCourse/selectKcCourseList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: s,
					success: res => {
						if(res.data.code == 200) {
							this.tableDataWrap = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			//栏目下拉框
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
//			课程列表多选框选择
			handleSelectionChange(val) {
				this.multipleSelection = [];
				this.courseSelectNamesMul = [];
				for(var i = 0;i<val.length;i++){
					this.multipleSelection.push(val[i].id);
					this.multipleSelectionName.push(val[i].courseName);
					this.courseSelectNamesMul.push({
						id:val[i].id,
						courseName:val[i].courseName
					});
				}
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getKcCircleList();
			},
			//确定课程
			courseSelectWrapSubmit(){
				this.courseSelectIds = this.multipleSelection;
				this.courseSelectNames = this.courseSelectNamesMul;
				this.courseSelectWrap = false;
				this.courseBefore = false;
				this.courseAfter = true;
			},
			//取消课程选择
			courseSelectClose(){
				this.courseSelectWrap = false;
			},
			//再次点击课程编辑
			courseEdit(){
				this.courseSelectWrap = true;
				this.getColumnList();
				this.getKcCircleList();
			},
			courseDelete(index){
				console.log(index);
				this.courseSelectNames.splice(index,1);
				this.courseSelectIds.splice(index,1);
				console.log(this.courseSelectNames,this.courseSelectIds);
			},
			//选择课程end
//-----------------------------------------------------------------------------------------------------------------
			//选择人员start
			coursePersonnel(){
				this.peopleSelectWrap = true;
				this.getOrganizationArr();
				this.getKcCircleListPeople();
			},
			getOrganizationArr(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getOrganizationInfo?"+'&rootcompanyid='+1+'&proviceid='+this.proviceid+'&cityid='+this.cityid+'&regionid='+this.regionid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.organizationArr = res.data.data;
						}
					}
				});
			},
			filterNode(value, data) {
        		if (!value) return true;
       	 		return data.name.indexOf(value) !== -1;
      		},
      		handleNodeClick(data){
        		this.dataId = data.id;
        		this.getKcCircleListPeople();
			},
			cityArrChange(data){
				this.proviceid = data[0];
				if(data[1]!=undefined){
					this.cityid = data[1];
				}else{
					this.cityid = '';
				};
				if(data[2]!=undefined){
					this.regionid = data[2];
				}else{
					this.regionid = '';
				};
				this.getKcCircleListPeople();
			},
			getKcCircleListPeople(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getUserByOrganizationId?"+'page='+this.currentpage+'&num='+this.pagesize+'&rootcompanyid='+1+'&name='+this.studyKeySearch+'&organizationId='+this.dataId+'&proviceid='+this.proviceid+'&cityid='+this.cityid+'&regionid='+this.regionid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							if(this.nowType=='edit'||this.nowType=='see'){
								setTimeout(() => {
								　　 this.rowMultipleCheckedPeople();
								}, 200)
							}
						}
					}
				})
			},
			//回显选中结果
			rowMultipleCheckedPeople(){
				var selectPeoples=[];
				if(this.peopleSelectIds!=''){
					this.peopleSelectIds.forEach(element =>{
						selectPeoples.push(parseInt(element))
					})
				};
				this.tableData.forEach(element => {
					if(selectPeoples.indexOf(element.id)>=0){
						this.$refs.multipleTable.toggleRowSelection(element);
					}
				});
			},
			getCityArr(){
           		this.$ajax({
                    url: this.$root.jifuUrl + "/getProviceCityRegionInfo",
                    method: 'GET',
                    data: {},
                    success: res => {
                        if(res.data.code == 200) {
							this.cityArr = res.data.data;
							this.cityArr.unshift({id:'',name:"选择地区",list:[]});
	 						this.cityArr.forEach(element => {
								element.list= this.getTreeDataCity(element.list)	
							});
                        }
                    }
                });
            },
            getTreeDataCity(data){
				for(var i=0;i<data.length;i++){
					if(data[i].list.length<1){
						data[i].list=undefined;
					}else {
						this.getTreeDataCity(data[i].list);
					}
				}
				return data;
        	},
			handleSelectionChangePeople(val) {
				this.multipleSelectionPeople = [];
				this.courseSelectNamesMulPeople = [];
				for(var i = 0;i<val.length;i++){
					this.multipleSelectionPeople.push(val[i].id);
					this.multipleSelectionNamePeople.push(val[i].courseName);
					this.courseSelectNamesMulPeople.push({
						id:val[i].id,
						peopleName:val[i].nickname
					})
				}
			},
			handleCurrentChangePeople(value) {
				this.currentpage = value;
				this.getKcCircleListPeople();
			},
			peopleSelectWrapSubmit(){
				this.peopleSelectIds = this.multipleSelectionPeople;
				this.peopleSelectNames = this.courseSelectNamesMulPeople;
				console.log(this.peopleSelectIds,this.peopleSelectNames);
				this.peopleSelectWrap = false;
				this.peopleBefore = false;
				this.peopleAfter = true;
			},
			peopleSelectClose(){
				this.peopleSelectWrap = false;
			},
			enter(item,index){
				this.$ajax({
					url: this.$root.jifuUrl + "/getUserInfoByUserid?"+'&userid='+item.id,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							let rebackRes = res.data.data;
							this.hover_headimg = rebackRes.headimg;
							this.hover_nickname = rebackRes.nickname;
							this.hover_gradeRuleName = rebackRes.gradeRuleName;
							this.hover_phone = rebackRes.phone;
							this.hover_organizationName = rebackRes.organizationName;
							this.hover_departmentName = rebackRes.departmentName;
							this.hover_stationName = rebackRes.stationName;
							this.hover_roleLabel = rebackRes.roleLabel;
						}
					}
				});
			},
			peopleEdit(){
				this.peopleSelectWrap = true;
				this.getOrganizationArr();
				this.getKcCircleListPeople();
			},
			peopleDelete(index){
				this.peopleSelectNames.splice(index,1);
				this.peopleSelectIds.splice(index,1);
			},
			//选择人员end
			//消息通知start
			selectTaskNoticeArr(){
				this.taskNoticeIds = []; 
				for(var i = 0;i<this.taskNotice.length;i++){
					this.taskNoticeArr.forEach(element => {
						if(element.id==this.taskNotice[i]){
							this.taskNoticeIds.push(element.id);
						}
					});
				}
			},
			//消息通知end
			//学习时间通知start
			selectstudyNoticeArr(){
				this.studyNoticeIds = [];
				for(var i = 0;i<this.studyNotice.length;i++){
					this.studyNoticeArr.forEach(element => {
						if(element.id==this.studyNotice[i]){
							this.studyNoticeIds.push(element.id);
						}
					});
				}
			},
			//学习时间通知end
			createTask(){
				let s = {
					rootcompanyid:1,
					courseids:this.courseSelectIds.join(','),
					userids:this.peopleSelectIds.join(','),
					starttime:this.starttime,
					endtime:this.endtime,
					taskNotice:this.taskNoticeIds.join(','),
					studyNotice:this.studyNoticeIds.join(','),
					type:1
				};
				if(this.openOrClose==1&&this.starttime==''&&this.endtime==''){
					this.$refs.alert.show({alertText: '学习时间为空！',alertSubmit:function(){alertStatus: 0}});
				}else{
					if(this.clickLock==true){
						this.clickLock = false;
						this.$ajax({
							url: this.$root.jifuUrl + '/addPlatformCompulsuryCourse',
							method: 'POST',
							data: this.qs.stringify(s),		
							success: res => {
								if(res.data.code == 200) {
									this.$refs.alert.show({alertText: '保存成功'});
									setTimeout(() =>{
										this.$router.push({
											name:'taskManager'
										});
									},2000)
								}else{
									this.clickLock = true;
									this.failText = res.data.message;
									this.$rootFunction().deleteResFail();
								}
							}
						});
					}
				}
			},
			updateTask(){
				let s = {
					id:this.id,
					rootcompanyid:1,
					courseid:this.courseSelectIds,
					userids:this.peopleSelectIds.join(','),
					starttime:this.starttime,
					endtime:this.endtime,
					taskNotice:this.taskNoticeIds.join(','),
					studyNotice:this.studyNoticeIds.join(','),
					type:1
				};
				if(this.openOrClose==1&&this.starttime==''&&this.endtime==''){
					this.$refs.alert.show({alertText: '学习时间为空！',alertSubmit:function(){alertStatus: 0}});
				}else{
					this.$ajax({
						url: this.$root.jifuUrl + '/updatePlatformCompulsuryCourse',
						method: 'POST',
						data: this.qs.stringify(s),		
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功'});
								setTimeout(() =>{
									this.$router.push({
										name:'taskManager'
									});
								},2000)
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			checkSave(){
				if(this.nowType == 'add') {
					this.createTask();
				}else if(this.nowType == 'edit') {
					this.updateTask();
				}
			},
			cancel(){
				this.$router.go(-1);
			},
			reBack(){
				this.$router.push({
					name:'taskManager'
				});
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row)
					})
					this.allSelect = !this.allSelect;
				}
			},
			getColumnList(){
				let columnType = [1];
				this.$rootFunction().columnList({columnType});
			},
		},
		components:{
			alert
		},
		mounted(){
			this.getParams();
			if(this.nowType == "edit"||this.nowType=='see') {
				console.log('306', this.nowType, this.$root.courseTaskManagerMsg);
				this.courseBefore = false;
				this.courseAfter = true;
				this.peopleBefore = false;
				this.peopleAfter = true;
				this.id = this.$root.courseTaskManagerMsg.id;
				this.rootcompanyid = this.$root.courseTaskManagerMsg.rootcompanyid;
				this.courseSelectNames.push({
					courseids:this.$root.courseTaskManagerMsg.courseid,
					courseName:this.$root.courseTaskManagerMsg.courseName
				});
				this.courseSelectIds = this.$root.courseTaskManagerMsg.courseid;
				
				if(this.$root.courseTaskManagerMsg.userids!=null){
					this.userids = this.$root.courseTaskManagerMsg.userids.split(',');
					this.peopleSelectIds = this.$root.courseTaskManagerMsg.userids.split(',');
				};
				if(this.$root.courseTaskManagerMsg.userNickName!=null){
					this.editUserNickName = this.$root.courseTaskManagerMsg.userNickName.split(',');
					this.editUserNickName.forEach(element => {
						this.peopleSelectNames.push({
							peopleName:element
						});
					});
				};
//				this.userHeadimg = this.$root.courseTaskManagerMsg.userHeadimg.split(',');
				
				this.starttime = this.$root.courseTaskManagerMsg.starttime;
				this.endtime = this.$root.courseTaskManagerMsg.endtime;

				if(this.starttime!=null&&this.endtime!=null){
					this.openOrClose = 1;
				}else{
					this.openOrClose = 2;
				};
				if(this.$root.courseTaskManagerMsg.studyNotice!=null){
					let editStudyNotice = this.$root.courseTaskManagerMsg.studyNotice.split(',');
					editStudyNotice.forEach(element => {
						this.studyNoticeIds.push(parseInt(element));
						this.studyNotice.push(parseInt(element));
					})
				};
				if(this.$root.courseTaskManagerMsg.taskNotice!=null){
					let editTaskNotice = this.$root.courseTaskManagerMsg.taskNotice.split(',');
					editTaskNotice.forEach(element => {
						this.taskNoticeIds.push(parseInt(element));
						this.taskNotice.push(parseInt(element));
					})
				};
			};
			this.getCityArr();
		},
		watch: {
      		filterText(val) {
        		this.$refs.tree.filter(val);
        	}
      	}
	}
</script>
<style>
	.createTask{padding-bottom: 100px}
	.taskLine{position: relative;overflow: hidden;padding: 10px 0}
	.taskLine .dateDive .el-input__inner{padding:0 0 0 39px;}
	.taskLine .dateDive em{color: #DCDFE6}
	.taskLine .el-select,.taskLine .el-input,.taskLine input{height: 33px;line-height: 33px}
	.taskLine .el-input__icon{line-height: 34px}
	.taskLine .tit{font-size:16px;color: #333;font-style: normal;color: #333;float: left;}
	.taskLine a{color: #44cef6;cursor: pointer;}
	.taskLine i{font-style: normal;font-size: 14px;color: #888;display: inline-block;margin-left: 10px}
	.taskLine .el-radio:nth-child(1){display: block;margin-bottom: 20px}
	.taskLine .dateDive{position: absolute;top: 0;left: 158px}
	.taskLine .warn{position: absolute;top: 46px;left: 158px}
	.taskLine .pepCon{margin-top: 15px;width: 860px;overflow: hidden;}
	.taskLine .pepCon .personHover{display: inline-block;background: #ebebeb;padding:10px;border-radius: 5px;font-size: 14px;text-align: center;position: relative;cursor: pointer;}
	.taskLine .pepCon .personHover span{margin-bottom: 0!important}
	.taskLine .pepCon .personHover a{position: absolute;top:0;right: 2px}
	.taskLine .notice{margin-top: 28px;background: #ebebeb;padding:20px;border-radius: 5px;margin-left: 55px}
	.taskLine .notice p{font-size:14px;color: #333;}
	.taskLine .notice em{display: block;float: inherit;}
	.taskLine .notice .el-checkbox-group{margin: 10px 0}
	.taskLine .courseBefore{float: left;}
	.taskLine .courseBefore span{color: #333;display: block;margin-right: 10px;margin-bottom: 6px}    
	.taskLine .courseBefore span i{color: #44cef6}
	.taskLine .el-radio-group .el-radio__input input{height: auto!important;line-height: auto!important}
	.courseSelectWrap{width: 900px;height: 500px;background: #fff;border: 1px solid #ccc;position: fixed;top: 50%;left: 50%;margin-top: -250px;margin-left: -375px;z-index: 999;border-radius: 10px;padding: 20px;box-sizing: border-box;font-size: 14px;}
	.courseSelectWrap .footerButton a{margin-top: 25px;margin-left: 220px;}
	.courseSelectClose{width: 15px;height: 15px;position: absolute;top: 20px;right: 20px;cursor: pointer;}
	.courseSelectLine{margin: 10px 0 20px;height:35px;position: relative;}
	.courseSelectLine .el-cascader{position: absolute;top: -5px;right: 225px}
	.courseSelectLine .el-select,.courseSelectLine .el-input,.courseSelectLine input{height: 33px;line-height: 33px}
	.courseSelectLine .el-input__icon{line-height: 34px}
	.courseSelectLine .msearch{float: right;position: relative;}
	.courseSelectLine .msearch input{width: 200px;height: 33px;line-height: 33px;padding-left: 10px;border: 1px solid #DCDFE6;border-radius: 3px;font-size:14px;color: #999;box-sizing: border-box;}
	.courseSelectLine .msearch a{height: 33px;display: inline-block;position: absolute;top: 0;right: 0}
	.studyPag{margin-top: 15px;text-align: right;}
	.courseSelectWrap .el-table .cell,.courseSelectWrap .el-table th div,.courseSelectWrap .el-table--border td:first-child .cell,.courseSelectWrap .el-table--border th:first-child .cell {padding:0;text-align:center;}
	.courseSelectWrap .courseSelectLine .msearch input{font-size: 12px}
	.courseSelectWrap .el-table .cell{font-size: 12px;color: #000}
	.courseSelectWrap .el-tree-node__label{font-size: 12px}
	.createTask .leftContent{width: 23%;float: left;border: 1px solid #EBEEF5;height: 307px;overflow-x: hidden}
	.createTask .leftContent .el-input{width: 90%;display: block;margin: 10px auto}
	.createTask .leftContent .el-tree__empty-block{min-height: 40px;}
	.createTask .leftContent .el-tree__empty-block .el-tree__empty-text{font-size: 14px;}
	.rightContent{width: 75%;float: right;height: 307px;overflow-x: hidden;}

	.infoDetail span{display: block;margin-bottom: 10px}
	.infoDetail .iconImg{overflow: hidden;margin-bottom: 10px}
	.infoDetail .iconImg img{width: 50px;height: 50px;float: left;display: block;margin-right: 10px}
	.infoDetail .iconImg span{float: initial;display: block;}

</style>